<template>
  <div class="classadd">
    
    <ul>
        <li style="position:relative">
          <span>班级名称</span>
          <el-input v-model="classname"  placeholder="请输入班级名称" @input="change" style="width:200px;margin:0 12px" />
          <div type="primary"  style="color:red;font-size:12px;margin-left:30px;position: absolute;top:10px;left: 350px;" v-if="!/^[0-9]{4}[a-zA-Z]{1}$/g.test(this.classname)">请输入前四位为0-9的数字，最后一位为a-zA-Z的字母</div>
        </li>
        <li>
          <span>所属学院</span>
          <el-select v-model="school" placeholder="请选择所属学院" style="width:200px;margin:0 12px">
            <el-option :label="item.school" :value="item.school" v-for="(item,index) in schoolArr" :key="index"></el-option>
          </el-select>
        </li>

        <li>
          <span>现阶段授课老师</span>
           <el-select v-model="userid" placeholder="请选择现阶段授课老师" style="width:200px;margin:0 12px">
            <el-option :label="item.name" :value="item.userid" v-for="(item,index) in teacherArr" :key="index"></el-option>
          </el-select>
        </li>

        <li>
          <span>现阶段辅导员</span>
          <el-select v-model="aaa" filterable placeholder="请选择辅导员"  
                 style="width:200px;margin:0 12px" >
                        <el-option 
                          v-for="(item) in instructorArr"
                          :key="item.userid"
                          :label="item.name"
                          :value="item.userid">
                        </el-option>
          </el-select>
        </li>

        <li>
          <span>现阶段课程</span>
          <el-select v-model="courseKey" placeholder="请选择现阶段课程" style="width:200px;margin:0 12px">
            <el-option
              v-for="item in courseArr"
              :key="item.key"
              :label="item.lesson"
              :value="item.key">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>班级类型</span>
          <el-select v-model="classType" placeholder="请选择" style="width:200px;margin:0 12px">
            <el-option
              v-for="item in list"
              :key="item.key"
              :label="item.key"
              :value="item.key.substring(0,1)">
            </el-option>
          </el-select>
        </li>
      </ul>
      <p><el-button type="primary"  @click="addClass">保存</el-button></p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      school:'',
      userid:'',
      aaa:"",
      courseKey:'',
      list:[{
        key:'大班',
        num:'50'
      },{
        key:'中班',
        num:'30'
      },{
        key:'小班',
        num:'10'
      }],
      classType:'',
      classname:'',
      instructorArr:[],//辅导员数据
      teacherArr:[],//授课老师数据
      courseArr:[],//现阶段课程数据
      schoolArr:[],//学院数据

    }
  },
  mounted(){this.setList()},
  methods:{
      setList(){
        this.$httpAxios(this.$api.class_List(),res=>{
          this.instructorArr = res.data.instructor
          this.teacherArr = res.data.lecturer
          this.classList=res.data.data
        })
       this.$httpAxios(this.$api.class_Sel(),res=>{
         this.courseArr = res.data.lesson
         this.schoolArr = res.data.school
      })
    },
    addClass(){
      if(!/^[0-9]{4}[a-zA-Z]{1}$/g.test(this.classname)) return this.$message("班级名称请输入前四位为0-9的数字，最后一位为a-zA-Z的字母")
      this.$httpAxios(this.$api.class_Add({obj:{classname:this.classname, shoolid:this.school, teacherid:this.userid,coachid:this.aaa,courseid:this.courseKey}}),res=>{
        if(res.code===1){
          this.$router.push('/classlist')
        }
      })
    },
    // 班级填写正则验证
    change(){
      
    }
 }
  
}
</script>
<style>
 .classadd ul>li{
    margin: 10px 0;
    list-style: none;
  }
  .classadd ul>li>span{
    display: inline-block;
    width: 120px;
    
  }
</style>